<template>
	<view class="my_icon_box" :style="[defaultDirection]">
		<view class="my_icon" :class="name" :style="[delfultIcon]"></view>
		<span class="my_icon-title" :style="[defaultTitle]" v-if="title">{{title}}</span>
	</view>
</template>

<script>
	export default {
		name: "Icon",
		props: {
			name: {
				type: String,
				required: true,
			},
			title: {
				type: String,
				default: null
			},
			size: {
				type: String | Number,
				default: "80",
			},
			titleColor: {
				type: String,
				default:  "#606266"
			},
			titleSize: {
				type: String | Number,
				default: "26"
			},
			mode: {
				type: String,
				default: "top"
			},
			interval: {
				type: Number,
				default: 5
			}
		},
		
		computed:{
			delfultIcon(){
				return {
					"margin": this.mode === "top" ? `${this.interval}rpx 0` : `0 ${this.interval}rpx`,
					"width":`${this.size}rpx`,
					"height": `${this.size}rpx`
				}
			},
			defaultDirection(){
				return {
					"flex-direction": (this.mode && this.mode === "left")?"row":"column",
				}
			},
			defaultTitle(){
				return {
					"margin": this.mode === "top" ? `0 0 ${this.interval}rpx 0` : `0 ${this.interval}rpx 0 0`,
					"color": this.titleColor,
					"font-size": `${this.titleSize}rpx`
				}
			}
		}
	}
</script>

<style>
	@import url("static/icon/icon.css");
	.my_icon_box {
		height: 100%;
		display: flex;
		align-items: center;
	}
</style>
